import React from 'react';
import ReactDom from 'react-dom';
import './build.scss';
import { api } from 'js/api/api';
import Button from 'views/component/button/button';
import utils from 'js/core/utils';
import playerStore from 'js/store/playerStore';
// import { observer, inject } from 'mobx-react';


class Build extends React.Component {
    constructor() {
        super()
        this.state = {
            selectBuildId: null
        }
    }
    componentDidMount() {
    }
    homeBuild = (homeBuildingId) => {
        let player = playerStore.player;
        if (!player.homeInfo.homeBuilding[homeBuildingId]) {
            api('homeBuild', { homeBuildingId: parseInt(homeBuildingId) }, (err, data) => {
                this.props.close();
                if (this.props.complete) {
                    this.props.complete();
                }
            })
        } else {
            api('homeBuildLvlUp', { homeBuildingId: parseInt(homeBuildingId) }, (err, data) => {
                this.props.close();
                if (this.props.complete) {
                    this.props.complete();
                }
            })
        }
    }
    select = (buildingId) => {
        this.setState({ selectBuildId: buildingId })
    }
    render() {
        let { selectBuildId } = this.state;
        let self = this;
        let totalConfig = window.totalConfig, propName = window.propName;
        let player = playerStore.player;
        let mapId = player.basicInfo.mapId;
        let homeInfo = player.homeInfo;
        let homeBuilding = homeInfo.homeBuilding;
        let homeBuildingConfig = totalConfig.homeBuilding;
        let node = [], selectNode;
        for (let buildingId in homeBuildingConfig) {
            let buildingInfo = homeBuildingConfig[buildingId].lvlUp[0];
            let lvlupInfo = homeBuildingConfig[buildingId].lvlUp[0];
            let buildName = buildingInfo.name;
            if (homeBuilding[buildingId]) {
                let buildlvl = homeBuilding[buildingId].lvl;
                buildingInfo = homeBuildingConfig[buildingId].lvlUp[buildlvl];
                lvlupInfo = homeBuildingConfig[buildingId].lvlUp[buildlvl + 1];
                buildName = buildingInfo.name + '=>' + lvlupInfo.name;
            }
            if (lvlupInfo) {
                let preBuilidIds = lvlupInfo.preBuilidIds;
                let flag = true;
                if (preBuilidIds) {
                    flag = utils.ifHasArray(homeBuilding, preBuilidIds);
                    if (!flag) {
                        continue;
                    }
                }
                let items = lvlupInfo.items;
                let needItem = [];
                for (let itemId in items) {
                    needItem.push(<div key={itemId} className="flex-col-6">{propName[itemId]}x{items[itemId]}</div>)
                }
                node.push(<div className={"buildItem flex-vcenter " + (selectBuildId == buildingId ? 'active' : '')} key={buildingId}
                    onClick={self.select.bind(self, buildingId)}>
                    <div className="name">{buildName}</div>
                    <div className="needItem flex wrap">{needItem}</div>
                </div>)
            }



        }
        if (selectBuildId) {
            let items = homeBuildingConfig[selectBuildId].items;
            let needItem = [];
            for (let itemId in items) {
                needItem.push(<div key={itemId} className="flex-col-6">{propName[itemId]}x{items[itemId]}</div>)
            }
            selectNode = <div className="">
                <div className="name">{propName[selectBuildId]}</div>
                <div className="needItem flex wrap">{needItem}</div>
                <Button onClick={() => { this.homeBuild(selectBuildId) }}>建造</Button>
            </div>
        }
        return <div id="build" className="flex-col">
            <div className="flex-g-1 scroll-absolute">
                <div>
                    {node}
                </div>
            </div>
            <div className="build-bottom">
                {selectNode}
            </div>
        </div>
    }
}

export default Build;